<template>
  <div class="search">
    <!-- 热词搜索 -->
    <van-search
      @input="clickHots"
      v-model="keyWords"
      placeholder="请输入搜索关键词"
    />
    <!-- 热词显示 -->
    <div v-if="keyWords == ''" class="search_wrap">
      <div class="hot_title">热门搜索</div>
      <div class="hot_name_wrap">
        <span
          class="hot_item"
          v-for="(item, index) in hotsList"
          :key="index"
          @click="clickHots(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <!-- 最佳匹配 -->
    <div v-else class="search_wrap">
      <div class="hot_title">最佳匹配</div>
      <van-cell-group>
        <MusicCell
          v-for="(item, index) in bestMatch"
          :id="item.id"
          :key="index"
          :title="item.name"
          :label="`${item.artists[0].name} - ${item.name}`"
        ></MusicCell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { keyWordsShow, songsShow } from "@/api/search";
export default {
  data() {
    return {
      keyWords: "",
      hotsList: [],
      bestMatch: [], // 根据keyWords匹配最佳歌曲
    };
  },
  methods: {
    // 通过点击热门词汇获取最佳匹配，以及输入框输入词汇获取最佳匹配
    async clickHots(keyWords) {
      if (keyWords == "") return;
      this.keyWords = keyWords;
      const res2 = await songsShow({ keywords: keyWords });
      // console.log(res2);
      this.bestMatch = res2.data.result.songs;
      // console.log(this.bestMatch);
    },
  },
  // 通过created钩子最快访问数据
  async created() {
    const res = await keyWordsShow();
    // console.log(res);
    this.hotsList = res.data.result.hots;
    // console.log(this.hotsList);
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 12px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 15px;
  padding: 5px 15px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 20px;
  border: 1px solid #d3d4da;
}
</style>